<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app">
      <template></template>
    </div>
  </body>
  <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {},
      mounted () {
        // this.parallel()
        // this.serial()
        // this.asyncTask().then(resd => {
        //   console.log("this is D result: ", resd)
        // })
        setTimeout(() => {
          console.log('AAAAA')
        }, 2000)
      },
      methods: {
        async parallel () {
          // 并行
          let datas = await Promise.all([
            new Promise(resolve => {
              setTimeout(resolve.bind(this, 10), 1000);
            }),
            new Promise(resolve => {
              setTimeout(resolve.bind(this, 12), 2000);
            })
          ])
          console.log(datas)
        },
        async serial () {
          // 串行
          let data1 = await new Promise(resolve => {
          setTimeout(resolve.bind(this, 10), 1000);
          })
          let data2 = await new Promise(resolve => {
          setTimeout(resolve.bind(this, 12), 1000);
          });
          console.log(data1, data2)
        },
        A () {
          // return new Promise(r => {
          //   let timeObj = setTimeout(() => {
          //     clearTimeout(timeObj)
          //     r("A")
          //   }, 2000)
          // })
          let timeObj = setTimeout(() => {
            clearTimeout(timeObj)
            console.log("A")
            return "A"
          }, 5000)
        },
        B () {
          return new Promise(r => {
            let timeObj = setTimeout(() => {
              clearTimeout(timeObj)
              r("B")
            }, 2000)
          })
        },
        C (resb) {
          return new Promise(r => {
            let timeObj = setTimeout(() => {
              clearTimeout(timeObj)
              console.log(resb)
              r("C")
            }, 2000)
          })
        },
        D (resa, resb, resC) {
          return new Promise(r => {
            let timeObj = setTimeout(() => {
              clearTimeout(timeObj)
              r({
                "A": resa,
                "B": resb,
                "C": resC,
                "D": "D"
              })
            }, 2000)
          })
        },
        async asyncBC() {
          const resb = await this.B();
          const resC = await this.C(resb);
          return { resb, resC}
        },
        async asyncTask() {
          const _this = this
          const [resa, { resb, resC}] = await Promise.all([_this.A(), _this.asyncBC()])
          const resd = await _this.D(resa, resb, resC)
          return resd
        }
      
      }
    });
  </script>
</html>
